<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	<script src="../js/jquery.serializejson.min.js"></script>
	<style>
		#typeBtn .easyui-linkbutton{
			width:100px;
		}
		#addRoot,#addChild,#change,#remove{
			width:100px;
			margin-top:10px;
		}
	</style>
</head>
<body>
	<div class="easyui-layout" style="width:700px;height:350px;" data-options="fit:true">
        <div data-options="region:'north'" style="height:50px;padding:5px">
	        <div id="typeBtn" class="easyui-panel" style="padding:5px;border:0" >
				<a href="javascript:void(0);" class="easyui-linkbutton" data-options="toggle:true,group:'g1',selected:true">新闻</a>
				<a href="javascript:void(0);" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">产品</a>
				<a href="javascript:void(0);" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">上传</a>
				<a href="javascript:void(0);" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">用户</a>
			</div>
        </div>
        <div data-options="region:'east',split:true" title="操作" style="width:300px;text-align:center">	        
	        <a href="javascript:void(0);" id="addRoot" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加根节点</a><br/>
	        <a href="javascript:void(0);" id="addChild" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加子节点</a><br/>
	        <a href="javascript:void(0);" id="change" class="easyui-linkbutton" data-options="iconCls:'icon-reload'">修改</a><br/>
        	<a href="javascript:void(0);" id="remove" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a><br/>
        </div>
        <div data-options="region:'center',title:'分类详情',iconCls:'icon-ok'" style="padding:10px">
           	<div id="tt">    	
    		</div>  		   		
        </div>
        <div id="dlg" class="easyui-dialog" title="分类信息" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:250px;padding:20px 10px">
	        <form id="ff" method="post">
	            <div style="margin-bottom:20px">
	                <input class="easyui-textbox" name="text" style="width:100%" data-options="label:'名称:',multiline:true">
	            </div>	            
	        </form>  
	        <div style="text-align:center;padding:5px 0">
	            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm(root)" style="width:80px">提交</a>
	            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">清空</a>
	        </div>  
	    </div>
    </div>   
    <script>
    	var type='0';
    	var id=null;
    	var root=null;    	
    	function treeLoad(type){
    		//将id和root清除
    		id=null;
       		root=null;
    		$('#tt').tree({
	            url: 'http://localhost:3000/cate/list/'+type,
	            method:'get'	            
	       	});
    	}    	
    	treeLoad(type);  
    	
    	//切换分类
    	$('#typeBtn a').click(function(){    		
    		$(this).addClass('current').siblings().removeClass('current');
       		type=$(this).index();
    		//$('#tt').tree('reload');   		
    		treeLoad(type); 
    	})
    	
    	//选择节点
    	$('#tt').tree({
    		onClick: function(node){
				id=node._id;
			}
    	})
    	
    	//点击添加根节点
    	$('#addRoot').click(function(){
    		if(type){
    			clearForm();
    			$('#dlg').dialog('open');
    			root=1;    			
    		}    		
    	}) 
    	
    	//点击添加子节点
    	$('#addChild').click(function(){
    		if(id){
    			clearForm();
    			$('#dlg').dialog('open'); 
    			root=2;
    		}else{
    			$.messager.show({
	                title:'信息提示',
	                msg:'请先选择父节点',
	                timeout:3000,
	                showType:'show'
	            });
    		}   		
    	})  
    	
    	//点击修改
    	$('#change').click(function(){
    		if(id){
    			clearForm();
    			$.ajax({
    				url:'http://localhost:3000/cate/data/'+id,
    				type:'get',
    				async:true
    			}).done(function(res){
    				$('#ff').form('load', res);
    				$('#dlg').dialog('open'); 
    				root=3;
    			})			
    		}else{
    			$.messager.show({
	                title:'信息提示',
	                msg:'请先选择节点',
	                timeout:3000,
	                showType:'show'
	            });
    		}
    	})
    	
    	//点击删除
    	$('#remove').click(function(){
    		if(id){
    			$.messager.confirm('确认删除', '确定删除该节点吗?', function(r){    			
					if (r){
						$.ajax({
							url:'http://localhost:3000/cate/data/'+id,
							type:'delete'
						}).done(function(){
							$.messager.show({
				                title:'信息提示',
				                msg:'成功删除',
				                timeout:3000,
				                showType:'show'
				            });
				            $('#tt').tree('reload');
						})
					}
				});
    		}else{
    			$.messager.show({
	                title:'信息提示',
	                msg:'请先选择要删除的节点',
	                timeout:3000,
	                showType:'show'
	            });
    		}   		
    	})  
    	
    	//提交
    	function submitForm(root){
    		var postData=$('#ff').serializeJSON();
    		//根据root判断是添加根节点、子节点还是修改	   		
    		switch(root){
    			case 1:
    			//添加根节点
		    		postData.type=type;    		
		    		console.log(postData);    		
					$.ajax({
						url:'http://localhost:3000/cate/data',
						type:'post',
						data:postData,
						async:true
					}).done(function(){
						$('#dlg').dialog('close');
						$.messager.show({
			                title:'信息提示',
			                msg:'根节点添加成功',
			                timeout:3000,
			                showType:'show'
			           });
			            treeLoad(type); 
					});
				break;
    			case 2:
    			//添加子节点
	    			postData.type=type;    
	    			postData.parentId=id;
	    			//console.log(postData);
	    			$.ajax({
						url:'http://localhost:3000/cate/data',
						type:'post',
						data:postData,
						async:true
					}).done(function(){
						$('#dlg').dialog('close');
						$.messager.show({
			                title:'信息提示',
			                msg:'子节点添加成功',
			                timeout:3000,
			                showType:'show'
			           });
			            treeLoad(type); 
					});
				break;   		
    			case 3:
    			//修改
	    			$.ajax({
						url:'http://localhost:3000/cate/data/'+id,
						type:'put',
						data:postData,
						async:true
					}).done(function(){
						$('#dlg').dialog('close');
						$.messager.show({
			                title:'信息提示',
			                msg:'修改成功',
			                timeout:3000,
			                showType:'show'
			           	});
			           	treeLoad(type); 
					});
				break;
    			
    		}	
    	}
    	
    	function clearForm(){
            $('#ff').form('clear');
        }
    	             
    </script>
</body>
</html>